const path=require('path')
const webpack=require('webpack')
const htmlWebpackPlugin=require('html-webpack-plugin')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
//通过node中的模块操作，向外暴露了一个配置对象
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口，表示要打包的文件
    output:{//输出文件配置
        path:path.join(__dirname,'./dist'),//输出文件目录
        filename:'bundle.js'//输出文件名称
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module:{//配置所有第三方模块加载器
        rules:[//第三方模块匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//css模块的匹配规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|jpeg|bmp)$/,use:'url-loader?limit=197466&name=[hash:8]-[name].[ext]'},
            //limit确定图片大小（单位：byte），图片超过或等于limit定义的数值，不转base64，小于则转为base64，hash是哈希值，最高32位，值代表取前几位，name=[name].[ext]转换前后名称后缀名保持一致
            {test:/\.(ttf|eot|woff|woff2|svg)$/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//不去解析node_modules里的文件
            {test:/\.vue$/,use:'vue-loader'}
        ]
    }
    // resolve:{//修改Vue被导入时候的包的路径
    //     alias:{
    //         'vue$':'vue/dist/vue.js'
    //     }
    // }
    
}
//使用webpack-dev-server这个工具，来实现自动打包编译功能，
//1.运行npm i webpack-dev-server -D 来安装开发以来到本地，
//2.安装完毕后用法和webpack一样
//3.本地安装的webpack-dev-server 无法当作脚本命令在powershell中直接运行，只有全局安装的（-g）的才可以直接使用，
//我们可以在package.json里定义"dev":"webpack-dev-server",最后使用npm run dev运行